<template>
    <div>
      <div class="title">热门推荐</div>
      <ul>
        <li class="item border-bottom"
            v-for="item of recommendList"
            :key="item.id">
            <img class="item-img" :src="item.imgUrl" />
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
            <button class="item-button">查看详情</button>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recommendList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1709/28/288fbeccc335f774a3.img.jpg_600x330_7511d912.jpg',
        title: '印象西湖',
        desc: '江省杭州市西湖区北山路'
      }, {
        id: '0002',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1709/28/288fbeccc335f774a3.img.jpg_600x330_7511d912.jpg',
        title: '印象西湖',
        desc: '江省杭州市西湖区北山路'
      }, {
        id: '0003',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1709/28/288fbeccc335f774a3.img.jpg_600x330_7511d912.jpg',
        title: '印象西湖',
        desc: '江省杭州市西湖区北山路'
      }, {
        id: '0004',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1709/28/288fbeccc335f774a3.img.jpg_600x330_7511d912.jpg',
        title: '印象西湖',
        desc: '江省杭州市西湖区北山路'
      }, {
        id: '0005',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1709/28/288fbeccc335f774a3.img.jpg_600x330_7511d912.jpg',
        title: '印象西湖',
        desc: '江省杭州市西湖区北山路'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
   .title
     margin-top: .2rem
     line-height: 2rem
     background: #eaeaea
     text-indent: .1rem
   .item
     overflow: hidden
     display: flex
     height: 60px
     background: coral
     .item-img
       width: 3.5rem
       height: 3.5rem
       padding: .1rem
      .item-info
         flex: 1
         padding: .1rem
         min-width: 0
       .item-title
         line-height: 1rem
         font-size: .32rem
         ellipsis()
       .item-desc
         line-height: 1rem
         color: #eaeaea
         ellipsis()
       .item-button
         line-height: .44rem
         margin-top: .2rem
         background: #333
         padding: .2rem
         border-radius: .06rem
         color: #fff
</style>
